<template>
  <div>

  
    <p class='add-wrap'>

      <el-button @click.stop='goBack'><i class="el-icon-arrow-left el-icon--left"></i>返回上层</el-button>

      <span style="margin-left:10px">
        <label>休假名称:</label>
        <el-input style='width:217px' v-model.trim='leaveName'/>
      </span>
      
      <span>
        <label>选择年份:</label>
        <el-date-picker
          v-model="year"
          @change='(val)=>this.year=val'
          format="yyyy"
          type="year"
        />
       
      </span>

      <a class="btn" @click.stop="handleSearch">
       查询
      </a>
      
    </p>

    <p>
      <a class="btn" @click.stop="dialogVisible = true">
        <i class="fa fa-plus"></i>新增
      </a>
      <el-button type='primary' @click.stop='importDialogVisible = true' style="margin-left:10px">假期导入</el-button>

    </p>

    <add-dialog :dialogVisible.sync='dialogVisible'/>
    <import-dialog :dialogVisible.sync='importDialogVisible'/>

  </div>
</template>

<script>
import AddDialog from './addDialog'
import ImportDialog from './importDialog'
import Vue from 'vue'
import Bus from './bus'
import { DatePicker } from 'element-ui'
Vue.use(DatePicker)
export default {
  components: {
    AddDialog,
    ImportDialog
  },
  data () {
    return {
      dialogVisible: false,
      leaveName: '',
      year: '',
      importDialogVisible: false
    }
  },
  methods: {


    goBack () {
      this.$router.push({ path: '/backStageManager/rulesManage' })
    },

    handleSearch () {
      Bus.$emit('leaveName', this.leaveName)
      Bus.$emit('year', this.year && parseInt(this.year))
      Bus.$emit('refresh', Math.random())
    },

  }
}
</script>

<style scoped>
.add-wrap {
  margin: 20px 0 20px 20px;
}
.add-wrap + p {
  margin: 20px 0 20px 20px;
}
.add-wrap > span {
  margin-right: 20px;
}

.add-wrap > span > label {
  margin-right: 6px;
}
.btn {
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  display: inline-block;
  background-color: #18a689;
  border-radius: 5px;
  padding: 5px;
  min-width: 60px;
  cursor: pointer;
}
.btn i {
  margin-right: 2px;
}
</style>